/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

import { Renderer } from "@k8slens/extensions";
import { observer } from "mobx-react";
import React from "react";
import { nodeShellPreferencesStore } from "./node-shell-preference-store";

const {
  Component: { SubTitle, Input },
} = Renderer;

@observer
export class NodeShellPreference extends React.Component {
  render() {
    const separatorStyle = {
      minWidth: "40px",
      minHeight: "40px",
    };
    const hintStyle = { marginTop: "8px" };

    return (
      <section>
        <SubTitle title="Custom Node Shell Image" />
        <Input
          theme="round-black"
          type="text"
          value={nodeShellPreferencesStore.customImage}
          onChange={(v) => {
            nodeShellPreferencesStore.customImage = v;
          }}
        />
        <span style={hintStyle}>
          Custom Docker image for node shell (e.g., alpine:latest, busybox, etc.)
        </span>

        <div style={separatorStyle}></div>

        <SubTitle title="Image Pull Secret" />
        <Input
          theme="round-black"
          type="text"
          value={nodeShellPreferencesStore.imagePullSecret}
          onChange={(v) => {
            nodeShellPreferencesStore.imagePullSecret = v;
          }}
        />
        <span style={hintStyle}>
          Optional: Secret name for pulling private images (leave empty for public images)
        </span>

        <div style={separatorStyle}></div>

        <SubTitle title="Namespace" />
        <Input
          theme="round-black"
          type="text"
          value={nodeShellPreferencesStore.namespace}
          onChange={(v) => {
            nodeShellPreferencesStore.namespace = v;
          }}
        />
        <span style={hintStyle}>
          Namespace where the node shell pod will be created
        </span>
      </section>
    );
  }
}

export class NodeShellPreferenceHint extends React.Component {
  render() {
    return <span>Node shell image and secret settings</span>;
  }
}